<template>
  <div class="index">
    <!--    <basic-container>-->
    <div class="w-100 flex">
      <div style="width: 400px; float: left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="f-w-700">数据看板</span>
          </div>
          <div
            class="text item align-center"
            style="height: 320px; text-align: -webkit-center"
          >
            <div class="card-box flex-align-items-unset">
              <div class="card-box-left">
                <div><img src="../../../public/svg/todayData.svg.svg" /></div>
                <p>昨日销量</p>
              </div>
              <div class="card-box-right">
                <el-row type="flex" class="row-bg" justify="end">
                  <el-col :span="12">
                    <div class="w-100" style="color: #7c7c7c">销售量（吨）</div>
                    <span
                      style="color: #18ae91; font-size: 20px; font-weight: bold"
                      >5555</span
                    >
                  </el-col>
                  <el-col :span="12">
                    <span style="color: #7c7c7c">销售额（元）</span>
                    <span
                      style="color: #18ae91; font-size: 20px; font-weight: bold"
                      >5555</span
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="card-box flex-align-items-unset">
              <div class="card-box-left">
                <div><img src="../../../public/svg/monthData.svg" /></div>
                <p>本月销量</p>
              </div>
              <div class="card-box-right">
                <el-row type="flex" class="row-bg" justify="end">
                  <el-col :span="12">
                    <div class="w-100" style="color: #7c7c7c">销售量（吨）</div>
                    <span
                      style="color: #287bc9; font-size: 20px; font-weight: bold"
                      >5555</span
                    >
                  </el-col>
                  <el-col :span="12">
                    <span style="color: #7c7c7c">销售额（元）</span>
                    <span
                      style="color: #287bc9; font-size: 20px; font-weight: bold"
                      >5555</span
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="card-box flex-align-items-unset">
              <div class="card-box-left">
                <div><img src="../../../public/svg/yearData.svg" /></div>
                <p>本年销量</p>
              </div>
              <div class="card-box-right">
                <el-row type="flex" class="row-bg" justify="end">
                  <el-col :span="12">
                    <div class="w-100" style="color: #7c7c7c">销售量（吨）</div>
                    <span
                      style="
                        color: rgba(247, 180, 55, 1);
                        font-size: 20px;
                        font-weight: bold;
                      "
                      >5555</span
                    >
                  </el-col>
                  <el-col :span="12">
                    <span style="color: #7c7c7c">销售额（元）</span>
                    <span
                      style="
                        color: rgba(247, 180, 55, 1);
                        font-size: 20px;
                        font-weight: bold;
                      "
                      >5555</span
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div style="padding-left: 410px; padding-right: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="f-w-700">加注机本月销售排行</span>
          </div>
          <div class="text item">
            <div id="echartC"></div>
          </div>
        </el-card>
      </div>
    </div>
    <div style="margin-top: 10px; padding-right: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="f-w-700">销售统计</span>
        </div>
        <div class="text item">
          <div id="echartSale"></div>
        </div>
      </el-card>
    </div>
    <!--    </basic-container>-->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";

export default {
  name: "wel",
  data() {
    return {
      jzechartOptions: {
        colors: ["#287bc9"],
        grid: {
          top: 20,
          left: 150,
          bottom: 70,
        },
        legend: {
          bottom: 10,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [
            "加注机1号",
            "加注机5号",
            "加注机1号",
            "加注机1号",
            "加注机5号",
            "加注机1号",
            "加注机1号",
            "加注机5号",
            "加注机1号",
          ],
        },
        series: [
          {
            name: "销售量（吨）",
            data: [900, 800, 700, 600, 500, 400, 300, 200, 100],
            type: "bar",
          },
        ],
      },
      saleOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          bottom: 10,
        },
        grid: {
          top: 20,
          left: 50,
          right: 20,
          bottom: 80,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        xAxis: {
          type: "category",
          data: [
            "一月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
            "二月份",
          ],
        },
        series: [
          {
            name: "加注量（kg）",
            type: "bar",
            data: [
              18203, 23489, 29034, 104970, 131744, 630230, 23489, 29034, 104970,
              131744,
            ],
            itemStyle: {
              color: "#287bc9",
            },
          },
          {
            name: "加注金额（元）",
            type: "bar",
            data: [
              19325, 23438, 31000, 121594, 134141, 681807, 3438, 31000, 121594,
              134141,
            ],
            itemStyle: {
              color: "#18ae91",
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.createJZEcharts();
    this.createMonthEcharts();
  },
  methods: {
    createJZEcharts() {
      let chartDom = document.getElementById("echartC");
      let echartsc = echarts.init(chartDom);
      echartsc.setOption(this.jzechartOptions);
    },
    createMonthEcharts() {
      let echartSaleDom = document.getElementById("echartSale");
      let monthEcharts = echarts.init(echartSaleDom);
      monthEcharts.setOption(this.saleOptions);
    },
  },
};
</script>
<style lang="scss">
.index {
  .el-card {
    .el-card__header {
      border: none;
    }
    .el-card__body {
      padding: 0 20px;
    }
  }
}
.card-box {
  font-size: 14px;
  display: flex;
  width: 330px;
  border: 1px solid #e2e8ef;
  border-radius: 5px;
  padding: 10px 5%;
  margin-bottom: 10px;
  &-left {
    text-align: center;
    flex: 1;
    img {
      width: 30px;
      height: 30px;
    }
    font-size: 16px;
  }
  &-right {
    flex: 2;
    font-size: 16px;
    line-height: 30px;
    border-left: 3px solid #e2e8ef;
    padding-left: 20px;
  }
}
#echartC {
  width: 100%;
  height: 320px;
}
#echartSale {
  width: 100%;
  height: 350px;
}
</style>
